<template>
    <el-container class="app-wrapper">
        <el-header class="header"><Header /></el-header> <!-- 将 Header 移到顶部 -->
        <el-container class="content-wrapper">
            <el-aside :width="sideBarWidth" class="sidebar-container">
                <Menu />
            </el-aside>
            <el-main class="main">
                 <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import Header from '../components/Header.vue'
import Menu from '../components/Menu.vue'
import { userStore } from '../stores/userStore'
import router from '../router'

const userInfo = userStore()

onMounted(() => {
    if (userInfo.userid === 0) {
        router.push('/login02')
    }
})

// 定义侧边栏的宽度，通过变量控制宽度的显示与隐藏
const sideBarWidth = ref('230px')
const hideSideBarWidth = '100px'
</script>

<style lang="less">
@menuText: #141515;
@menuActiveText: #212020;
@subMenuActiveText: #050505;

@menuBg: #fff;
@menuHover: #fff;

@subMenuBg: #1f2d3d;
@subMenuHover: #001528;

@sideBarWidth: 210px;
@hideSideBarWidth: 67px;
@sideBarDuration: 0.28s;
@headerHeight: 50px; // Header 的固定高度

.app-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column; // 使 Header 位于顶部
}

.header {
    height: @headerHeight;
    background-color: #f5f5f5;
    padding: 0;
    height: 6%;
}

.content-wrapper {
    flex-grow: 1; // 让 Main 填充剩余空间
    display: flex;
    background-color: #f5f5f5;
    transition: all @sideBarDuration;
}

.sidebar-container {
    background-color: @menuBg;
    color: @menuText;
    transition: width @sideBarDuration;

    &:hover {
        background-color: @menuHover;
    }
}

.main {
    flex-grow: 1;
    padding: 20px;
    overflow: auto;
}
</style>
